<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,minimum-scale=1.0,maximum-scale=1.0">
    <link rel="stylesheet" href="css/main.css"/>
    <title></title>
</head>
<body>

    <div>
        <!--遮罩-->
        <section class="zhezhao"></section>



        <!--使用规则-->
        <section class="pop-main pop-rule">
            <h1>美丽屋租房抵用券使用规则</h1>
            <p>
                1.请注意使用日期，租房抵用券有效期：<br/>
                2017年3月15日-4月26日<br/>
                2.租房抵用券不可叠加使用<br/>
                3.当房租低于租房抵用券时，不补差价<br/>
                4.租满一年使用<br/>
                5.银城千万间租房抵用券 1365元（月租<br/>
                满2000元）、665元（月租满1000元）、<br/>
                365元（无门槛）<br/>
            </p>
            <button class="bt-close-rule">我知道了</button>
        </section>
        <!--end-->



        <!--你的想法-->
        <section class="pop-main pop-ideas">
            <section class="tags clearfix">
                <span>特色标签:</span>
                <ul class="clearfix">
                    <li >
                        支持月付
                        <input type="checkbox"/>
                    </li>
                    <li>
                        交通便利
                        <input type="checkbox"/>
                    </li>
                    <li>
                        家电齐全
                        <input type="checkbox"/>
                    </li>
                    <li>
                        两间以上空房
                        <input type="checkbox"/>
                    </li>
                    <li>
                        配套成熟
                        <input type="checkbox"/>
                    </li>
                    <li>
                        高素质室友
                        <input type="checkbox"/>
                    </li>
                    <li>
                        地铁口10分钟
                        <input type="checkbox"/>
                    </li>
                    <li>
                        有电梯
                        <input type="checkbox"/>
                    </li>
                    <li>
                        环境优美
                        <input type="checkbox"/>
                    </li>

                </ul>
            </section>
            <section class="ideas clearfix">
                <span>你的想法:</span>
                <textarea name="" >

                </textarea>
            </section>
            <button class="bt-submit">提交</button>
        </section>
        <!--end-->


        <!--工作地点-->
        <section class="pop-main pop-works">
            <section class="ideas clearfix">
                <span>工作地点:</span>
                <textarea name="" >

                </textarea>
            </section>
            <button class="bt-work-submit">提交</button>
        </section>
        <!--end-->


        <!--登录-->
        <section class="pop-main pop-login">
            <section class="pop-block clearfix">
                <label for="">手机号:</label>
                <input type="text"/>
            </section>
            <section class="pop-block pop-card clearfix">
                <label for="">验证码:</label>
                <input type="text"/>
                <span class="bt_card">发送验证码</span>
            </section>
            <button class="bt-login-submit">提交</button>
        </section>
        <!--end-->



        <!--提交成功-->
        <section class="pop-main pop-ok">
           <p>提交成功！</p>
        </section>
        <!--end-->
    </div>
</body>
<script src="js/jquery-1.8.2.min.js"></script>
<script>
    ;(function (doc, win) {
        var docEl = doc.documentElement,
                resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                recalc = function () {
                    var clientWidth = docEl.clientWidth;
                    if (!clientWidth) return;
                    docEl.style.fontSize = 20 * (clientWidth / 375) + 'px';
                };

        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);

    })(document, window);


    //显示
    $('.zhezhao').show();
    $('.pop-rule').show();




    //-----关闭规则弹窗
    $('.bt-close-rule').click(function () {
        $('.zhezhao').hide();
        $('.pop-rule').hide();
    });
    $('.zhezhao').click(function () {
        $('.zhezhao').hide();
        $('.pop-rule').hide();
    });


    //------你的想法
    $('.pop-ideas li input').click(function () {
        if($(this).is(':checked')){
            $(this).parent().addClass('choose-li')
        }else{
            $(this).parent().removeClass('choose-li');
        }
    });
    $('.zhezhao').click(function () {
        $('.zhezhao').hide();
        $('.pop-ideas').hide();
    });
    $('.bt-submit').click(function () {
        $('.zhezhao').hide();
        $('.pop-ideas').hide();
    });

    //-------工作地点
    $('.zhezhao').click(function () {
        $('.zhezhao').hide();
        $('.pop-works').hide();
    });
    $('.bt-work-submit').click(function () {
        $('.zhezhao').hide();
        $('.pop-works').hide();
    });


    //-------登录
    $('.zhezhao').click(function () {
        $('.zhezhao').hide();
        $('.pop-login').hide();
    });
    $('.bt-login-submit').click(function () {
        $('.zhezhao').hide();
        $('.pop-login').hide();
    });
    $('.bt_card').click(function () {
        yanzhenma.clocks();
    });
    var yanzhenma = (function () {
        var wait = 60;
        var disableds = true;
        var inerTime;
        var $target = $('.bt_card');
        var times = function () {
            wait--;
            if(wait == 0){
                clearInterval(inerTime);
                disableds = true;
                $target.html('发送验证码');
                wait = 60;
            }
            else{
                $target.html('重新发送'+wait+'');
            }
        };
        var clocks = function () {
            if(disableds){
                disableds = false;
                inerTime = setInterval(times,1000);
            }
        }
        return {
            clocks:clocks
        }
    })();

    //------提交成功
    $('.zhezhao,.pop-ok').click(function () {
        $('.zhezhao').hide();
        $('.pop-ok').hide();
    });
</script>
</html>